<template>
	<div>
	<!-- 轮播图 -->
	<swiper :LunbotuList="listLunBoTu" :isfull="true"></swiper>
<!-- 导航栏 -->
 <ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/newsList">
						<img src="../image/menu1.png" />
						<div class="mui-media-body">新闻资讯</div></router-link></li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/photoHome">
						<img src="../image/menu2.png" />
						<div class="mui-media-body">图片</div></router-link></li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/handsetShop">
						<img src="../image/menu3.png" />
						<div class="mui-media-body">手机商城</div></router-link></li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
						<img src="../image/menu4.png" />
						<div class="mui-media-body">地图</div></a></li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
						<img src="../image/menu5.png" />
						<div class="mui-media-body">搜索</div></a></li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
						<img src="../image/menu6.png" />
						<div class="mui-media-body">联系</div></a></li>
	 </ul> 
	
	</div>					
</template>

<script>
	import swiper from './publicComponent/swiper.vue';
	import { Toast } from 'mint-ui';
	export default {
		data (){
			return {
				listLunBoTu: []
			}
		},
		methods: {
			// 通过vue-resource获取轮播图数据
			getLunBoTu(){
				this.$http.get('api/getlunbo').then(function(res){
					if (res.body.status == 0) {
						this.listLunBoTu = res.body.message;
					}else{
						Toast('轮播图json数据url地址已失效');
					}
				})
			}
		},
		created(){
			this.getLunBoTu();
		},
		components: {
			swiper
		}
	}
</script>

<style scoped="scoped">
	
	.mui-grid-view.mui-grid-9{
		background: #fff;
	}
	.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-4{
		border: none;
	}
	.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-4 img{
		width: 60px;
		height: 60px;
	}
</style>
